'use strict';

/* Directives */


angular.module('spf2t.directives', ['d3'])
.directive('appVersion', ['version', function(version) {
  return function(scope, elm, attrs) {
    elm.text(version);
  };
}])

.directive('grid', ['d3', function(d3) {
  return {
    link: function(scope, elem, attrs) {

      // globals
      var squareLength = 30;
      var width = squareLength * scope.gridWidth;
      var height = squareLength * scope.gridHeight;

      // Define the x and y scales
      var xScale = d3.scale.linear()
      .domain([0,scope.gridWidth])
      .range([0, width]);

      var yScale = d3.scale.linear()
      .domain([0,scope.gridHeight])
      .range([height, 0]);


      // Grab or create the svg
      var svg = d3.select(elem[0])
      .selectAll('svg#gridId-'+scope.gridId)
      .data([scope.gridId], function (d) {return d});

      svg.enter().append("svg")
      .attr("width", width+"px")
      .attr("height", height+"px")
      .attr('id', 'gridId-' + scope.gridId);

      // bind arrow keys to move block
      svg.append('rect')
      .attr('class', 'mask')
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', width+'px')
      .attr('height', height+'px')
      .attr('focusable', 'true')
      .style('opacity', 0.3);

      scope.render = function () {
        // Select the blocks
        var activeBlock = svg.selectAll("rect.active")
        .data([scope.activeBlock], function (d) {
          return d.id
        });

        // Draw the block...
        activeBlock.enter().append('rect')
        .attr('class', function(d) {return d.color})
        .classed('block', true)
        .classed('active', true)
        .attr('height', squareLength)
        .attr('width', squareLength)
        .attr('y', function(d) {return yScale(d.y)});


        // Move the block into place
        var yPos= parseInt(activeBlock.attr('y')) + scope.dY;
        var yCoord = Math.floor(yScale.invert(yPos));

        var checkCollision = function () {
          // Check if current coordinate has a block or is 0
          if (scope.activeBlock.y <= 0 || scope.gridIndex[scope.activeBlock.x][scope.activeBlock.y-1] > 0) {
            return true;
          }
        }

        // update the block
        if (scope.activeBlock.y != yCoord) {
          scope.activeBlock.y = yCoord;
        }
        activeBlock
        .attr('x', function(d) {return xScale(d.x)})
        .attr('y', yPos);

        // Collision detection
        if (checkCollision()) {
          // Update current block
          activeBlock.classed('active', false);
          scope.activeBlock.y= yCoord;
          // Add block to list of all blocks
          scope.blocks.push(scope.activeBlock);
          // move to final location
          activeBlock
          .attr('x', xScale(scope.activeBlock.x))
          .attr('y', yScale(scope.activeBlock.y+1));
          // Add block to grid index
          scope.gridIndex[scope.activeBlock.x][scope.activeBlock.y] += 1;
          // Make a new block and start over
          scope.activeBlock = scope.newBlock();
          scope.$apply(); // let the scope know something's changed

          // Check for game over
          scope.gridIndex[scope.activeBlock.x][scope.activeBlock.y]
          if (scope.gridIndex[3][2] > 0) {
            scope.gameStatus = "You lost";
            scope.$apply();
            clearInterval(gameLoop);
          }
        }

      }

      scope.render();
      var gameLoop = setInterval(scope.render, 20);

      scope.$watch('activeBlock', function(newVals, oldVals) {
        return scope.render();
      }, true);

    }

  }
}])
;
